<!-- saved from url=(0026)/test.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>骡窝窝问答,解决旅行问题,基于旅游的问答分享平台 - 骡窝窝</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no,address=no">
    <style>
        .container {
            width: 100%;
        }

        .commentbox {
            width: 100%;
            margin: 20px auto;
        }

        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }

        .comment-list {
            width: 100%;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }

        .comment-list .comment-info {
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }

        .comment-list .comment-info header {
            width: 10%;
            position: absolute;
        }

        .comment-list .comment-info header img {
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }

        .comment-list .comment-info .comment-right {
            padding: 5px 0px 5px 11%;
        }

        .comment-list .comment-info .comment-right h3 {
            margin: 5px 0px;
        }

        .comment-list .comment-info .comment-right .comment-content-header {
            height: 25px;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span {
            padding-right: 2em;
            color: #aaa;
        }

        .comment-list .comment-info .comment-right .comment-content-header span, .comment-list .comment-info .comment-right .comment-content-footer span.reply-btn, .send, .reply-list-btn {
            cursor: pointer;
        }

        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply {
            border-bottom: 1px dashed #ccc;
        }

        .comment-list .comment-info .comment-right .reply-list .reply div span {
            padding-left: 10px;
        }

        .comment-list .comment-info .comment-right .reply-list .reply p span {
            padding-right: 2em;
            color: #aaa;
        }

        .more-list {
            display: block;
            margin: 15px;
            line-height: 35px;
            background-color: #f0f0f0;
            text-align: center;
            color: #999;
            border-radius: 4px;
            font-size: 1.5rem;
        }

        .clearfix:after {
            clear: both;
            height: 0;
            overflow: hidden;
            display: block;
            visibility: hidden;
            content: "."
        }
    </style>
    <link href="/css/mobile+css+head_mobile+css+ui^YVw^1526627473.css" rel="stylesheet" type="text/css">

    <link href="/css/new_ask2016.css" rel="stylesheet" type="text/css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <script src="/js/plugins/jquery/jquery.comment.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            $('#comment').click(function () {
                var user = JSON.parse(sessionStorage.getItem("user"));
                if (user) {
                    var comment = $('textarea[name=commentContent]').val();
                    if (comment) {
                        $("#commentForm").ajaxSubmit(function (data) {
                            if (data.success) {
                                window.location.reload();
                            }
                        })
                    } else {
                        $(document).dialog({
                            titleShow: false,
                            content: "请输入评论再提交!"
                        });
                    }
                } else {
                    $(document).dialog({
                        type: 'confirm',
                        style: 'ISO',
                        titleShow: false,
                        content: '登录后才能评论',
                        buttons: [
                            {
                                name: '跳转登录页面',
                                callback: function () {
                                    window.location.href = "/login.html";
                                }
                            },
                            {
                                name: '取消',
                                callback: function () {
                                }
                            }
                        ]
                    });
                }
            })
            var params = getParams();
            if (params.id) {
                //定义浏览量
                var pageviews;
                //获取问题及提问者信息
                $.get("/questions/" + params.id, function (data) {
                    pageviews = data.pageviews + 1;
                    $.ajax({
                        url: "/questions/" + params.id,
                        data: "pageviews=" + pageviews,
                        type: "PUT"
                    });
                    data.pageviews = pageviews;
                    $('.container').renderValues(data, {
                        getHref: function (item, value) {
                            var href = $(item).data("href");
                            $(item).attr("href", href + value);
                        }

                    });
                });
                //首先我们需要获取当前页的标签
                var currentInput = $('#currentPage');
                //因为我们手机滚动之前的数据就没有了,只有当前查出来的不合理
                var arr = [];
                var pages = 1;

                function query() {
                    //获取当前页
                    var currentPage = currentInput.val();
                    $.get("/questions/" + params.id + "/comments", {currentPage: currentPage}, function (data) {
                        pages = data.pages;
                        $('#counts').html(data.total);
                        $.ajax({
                            url: "/questions/" + params.id,
                            data: "counts=" + data.total,
                            type: "PUT"
                        });
                        //把两个数组的数据合并在一起,就可以滚动了
                        $.merge(arr, data.list);
                        var json = {list: arr};
                        console.log(json);
                        var commentIds = [];
                        $('.renderTest').renderValues(json, {
                            getUser: function (item, value) {
                                var href = $(item).data("href");
                                $(item).attr("href", href + value);
                            },
                            getCommentId: function (item, value) {
                                commentIds.push("reply" + value);
                                $(item).attr("id", "reply" + value);
                            },
                            getUserByClick: function (item, value) {
                                $(item).html("@" + value);
                            },
                            goUser: function (item, value) {
                                var href = $(item).data("href");
                                $(item).attr("href", href + value);
                            }
                        });

                        //回复控制标志
                        var replycotr = true;

                        //评论的id
                        var replyBodyId;

                        //回复标志
                        $.each(commentIds, function (index, ele) {

                            $('#' + ele).click(function () {
                                var user = JSON.parse(sessionStorage.getItem("user"));
                                if (user) {
                                    replyBodyId = "r" + ele;
                                    if (replycotr) {
                                        var temp = "<textarea cols=\"80\" rows=\"50\" id=\"" + replyBodyId + "\" placeholder=\"来说几句吧......\" class=\"mytextarea\"  name=\"replyBody\"></textarea>\n" +
                                            "<span class=\"send\">发送</span>"
                                        $(this).closest("div").append(temp);
                                    } else {
                                        $("textarea[name=replyBody]").detach();
                                        $(".send").detach();
                                    }
                                    replycotr = !replycotr;
                                    $('.send').click(function () {
                                        var commentId = $(this).prev().attr("id").substring(6);
                                        var replyBody = $(this).prev().val();
                                        if (replyBody) {
                                            $.post("/questions/comments/" + commentId, {replyBody: replyBody}, function (data) {
                                                if (data.success) {
                                                    window.location.reload();
                                                }
                                            })
                                        } else {
                                            $(document).dialog({
                                                titleShow: false,
                                                content: "请输入内容再发送!"
                                            });
                                        }
                                    });
                                } else {
                                    $(document).dialog({
                                        type: 'confirm',
                                        style: 'ISO',
                                        titleShow: false,
                                        content: '登录后才能回复',
                                        buttons: [
                                            {
                                                name: '跳转登录页面',
                                                callback: function () {
                                                    window.location.href = "/login.html";
                                                }
                                            },
                                            {
                                                name: '取消',
                                                callback: function () {
                                                }
                                            }
                                        ]
                                    });
                                }

                            })
                        })

                    });
                    currentInput.val(parseInt(currentPage) + 1);
                }

                query();
                $('._j_add_more_button').click(function () {
                    var currentPage = currentInput.val();
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: "没有更多评论了!!!",
                            autoClose: 1000
                        });
                    }
                })
                //设置表单提交路径
                $("#commentForm").attr("action", "/questions/" + params.id + "/comments");
            }
        });

    </script>

</head>
<body>
<form method="post" id="pageviewsForm">
    <input type="hidden" name="pageviews">
</form>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="/question.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="container">
        <input type="hidden" name="id">
        <div class="form-group">
            <h2 render-html="title"></h2>
            <div>
                <p>
                    <a data-href="/userProfiles.html?authorId=" render-key="user.id" render-fun="getHref">
                        <img render-src="user.headImgUrl" alt="..." class="rounded-circle" width="50px">
                    </a>
                </p>
                <span render-html="user.nickName"></span>
            </div>
        </div>
        <img id="coverUrl" render-src="coverUrl" width="100%">
        <span render-html="content"></span>
        <div class="clearfix">
            <span class="fl-r"><b render-html="pageviews" id="pageviews"></b>浏览<b id="counts"></b>回答</span>
        </div>
    </div>
    <input type="hidden" id="currentPage" name="currentPage" value="1">

    <div class="container-fluid">
        <form id="commentForm" method="post">
            <div class="commentbox">
                <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea"
                          name="commentContent"></textarea>
                <div class="btn btn-info pull-right" id="comment">评论</div>
            </div>
        </form>
        <div class="comment-list renderTest">
            <div render-loop="list">
                <div class="comment-info">
                    <a data-href="/userProfiles.html?authorId=" render-key="list.user.id" render-fun="getUser">
                        <header><img render-src="list.user.headImgUrl"></header>
                    </a>
                    <div class="comment-right">
                        <h3 render-html="list.user.nickName"></h3>
                        <div class="comment-content-header"><i class="fa fa-clock-o fa-lg"></i><span
                                render-html="list.createTime"></span><i class="fa fa-map-marker fa-lg"></i><span
                                render-html="list.user.place"></span></div>
                        <p class="content" render-html="list.commentContent"></p>
                        <div class="comment-content-footer">
                            <div class="row">
                                <div class="col-md-2"><span class="reply-btn" render-key="list.id"
                                                            render-fun="getCommentId">回复</span></div>
                            </div>
                        </div>
                        <div class="reply-list" render-loop="list.questionCommentReplies">
                            <div class="reply">
                                <!--左边的昵称链接-->
                                <div><a data-href="/userProfiles.html?authorId="
                                        render-key="list.questionCommentReplies.user.id" render-fun="getUser"
                                        class="replyname" render-html="list.questionCommentReplies.user.nickName"></a>:
                                    <a data-href="/userProfiles.html?authorId=" render-key="list.user.id"
                                       render-fun="goUser"><span render-key="list.user.nickName" render-fun="getUserByClick"></span></a>
                                    <span render-html="list.questionCommentReplies.replyBody"></span>
                                </div>
                                <p><span render-html="list.questionCommentReplies.createTime"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin-bottom: 65px;">
    <a class="more-list _j_add_more_button">更多评论</a>
</div>
</body>
</html>